<template>
  <div id="mine-team">
    <section v-if="leader" class="leader">
      <header class="this-public-header">我的上级</header>
      <article>
        <p>姓名：{{ leader.user_login }}</p>
        <p>电话：{{ leader.mobile }}</p>
        <p>团队：{{ leader.name }}</p>
        <p>工号：{{ leader.job_no }}</p>
      </article>
    </section>
    <section v-if="teams" class="groups">
      <header class="this-public-header">我的下级</header>
      <template v-for="(item, index) in teams">
        <div class="title-wrap">
          <h4>{{ index }}</h4>
        </div>
        <div class="scroll-wrap">
          <div class="items">
            <section v-for="(item, index) in items" :key="index">{{ item }}</section>
          </div>
          <table>
            <tbody>
            <tr
              v-for="(subItem, subIndex) in item"
              :key="subIndex"
              :class="{'captain': subItem.role_id == 4}">
              <td>{{ subItem.user_login }}</td>
              <td>{{ subItem.job_no }}</td>
              <td>{{ subItem.mobile }}</td>
              <td v-if="subItem.sex === 1">男</td>
              <td v-else-if="subItem.sex === 2">女</td>
              <td v-else-if="subItem.sex === 0">-</td>
              <td>{{ subItem.age }}</td>
              <td>{{ subItem.check_time }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </template>
    </section>
  </div>
</template>

<script>
  export default {
    name: "mine-eam",
    data() {
      return {

        // 根据数据格式

        leader: {
          user_login: '', // 姓名
          mobile: '', // 电话
          name: '', // 团队
          job_no: '', // 工号
        },
        items: [
          '姓名',
          '工号',
          '电话',
          '性别',
          '年龄',
          '入职时间'
        ],
        /**
         * 根据数据格式
         * item: 团队名
         * item => {
         *        user_login: xxx, // 名字
         *        job_no: xxx, // 工号
         *        mobile: xxx, // 手机
         *        sex: xxx, // 性别
         *        age: xxx, // 年龄
         *        check_time: xxx // 入职时间
         * }
         */
        teams: []
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_TEAM,
        params: {
          user_id: localStorage.getItem('id')
        },
        success: (res) => {

          // 赋值

          this.leader = res.data.data.my_up;
          this.teams = res.data.data.my_down;
        }
      })
    }
  }
</script>

<style scoped lang="scss">

  #mine-team {

    $this-public-height: 4rem;
    $this-public-padding: 1rem;

    .this-public-header {
      height: $this-public-height;
      line-height: $this-public-height;
      padding-left: $this-public-padding;
      border-bottom: 1px solid $grey;
      font-size: 1.5rem;
      color: #333;
    }

    >.leader {
      margin-top: 1rem;
      box-shadow: $public-box-shadow-bottom;
      background: $white;

      >article {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 8rem;

        >p {
          display: block;
          width: 50%;
          padding-left: 3rem;
          font-size: 1.4rem;
          color: #333;
        }
      }
    }

    >.groups {
      margin-top: 1rem;
      background: $white;

      >.title-wrap {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: $this-public-height;

        >h4 {
          display: inline-block;
          min-width: 12rem;
          padding: 0 2rem;
          height: 2rem;
          line-height: 2rem;
          font-size: 1.2rem;
          color: $white;
          text-align: center;
          background: url("../../assets/images/mine/h4-background.png") no-repeat center / $size-as-parent $size-as-parent;
        }
      }

      >.scroll-wrap {
        width: $size-as-parent;
        box-shadow: $public-box-shadow-bottom;
        overflow-x: scroll;
        -webkit-scroll-bar: none;
        -webkit-overflow-scrolling: touch;

        >.items {
          display: flex;
          width: 200%;
          height: $this-public-height;
          box-shadow: $public-box-shadow-bottom;
          background: #e9f6ff;

          >section {
            width: 33.33%;
            line-height: $this-public-height;
            text-align: center;
            font-size: 1.5rem;
            color: #333;
          }
        }

        >table {
          width: 200%;

          tr {
            display: flex;
            height: $this-public-height;

            &.captain {
              background: #c3e9ff;
            }

            >td {
              width: 33.33%;
              line-height: $this-public-height;
              font-size: 1.2rem;
              color: #333;
              text-align: center;
              border: 1px solid $grey;
            }
          }
        }
      }
    }
  }
</style>
